<div class="dialog-dam">
  <nz-tabset (nzSelectChange)="onSelectChange($event)">
    <nz-tab *ngFor="let item of tabs; let idx = index" [nzTitle]="item">
      <ng-container *ngIf="idx == 0">
        <div class="diagram-box">
          <div class="flow">
            流量：
            {{ pumpStatus.flux }} m³/s
          </div>
          <div class="level-left">{{ pumpStatus.fpdLevel }} m</div>
          <div class="level-right">{{ pumpStatus.bpdLevel }} m</div>
          <div class="pump-status">
            <div [class]="pumpStatus.bpdStatus ? 'on' : 'off'">
              {{ pumpStatus.bpdStatus ? "启" : "停" }}
            </div>
            <div [class]="pumpStatus.fpdStatus ? 'on' : 'off'">
              {{ pumpStatus.fpdStatus ? "启" : "停" }}
            </div>
          </div>
          <img src="./assets/images/map/monitor/diagram-pump.png" alt="" />
        </div>
      </ng-container>
      <ng-container *ngIf="idx == 1">
        <div class="title">
          <nz-range-picker
            nzFormat="yyyy-MM-dd"
            [nzPlaceHolder]="['开始时间', '结束时间']"
            ngModel
            (ngModelChange)="onChange($event)"
          ></nz-range-picker>
          <button nz-button nzType="primary" (click)="onQueryProcessList()">
            确定
          </button>
        </div>
        <div
          echarts
          [options]="processOpt"
          [merge]="processOptChange"
          style="height: 420px;"
        ></div>
      </ng-container>
      <ng-container *ngIf="idx == 2">
        <div class="title2" nz-row>
          <div nz-col nzSpan="10">
            <span>特征值选择：</span>
            <nz-select
              [(ngModel)]="selectedIdx"
              (ngModelChange)="changeMonthChart()"
            >
              <nz-option
                *ngFor="let item of eigenvalues; let idx = index"
                [nzValue]="idx"
                [nzLabel]="item"
              ></nz-option>
            </nz-select>
          </div>
          <div nz-col nzSpan="14">
            <span>历史年段：</span>
            <nz-year-picker
              [(ngModel)]="year1"
              nzPlaceHolder=""
            ></nz-year-picker>
            <nz-year-picker
              [(ngModel)]="year2"
              nzPlaceHolder=""
            ></nz-year-picker>
          </div>
        </div>
        <div class="title2" nz-row>
          <div nz-col nzSpan="10">
            <span>时间类型：</span>
            <nz-select [(ngModel)]="type">
              <nz-option
                *ngFor="let item of timeTypes; let idx = index"
                [nzValue]="idx"
                [nzLabel]="item"
              ></nz-option>
            </nz-select>
          </div>
          <div nz-col nzSpan="9">
            <span>当前年：</span>
            {{ curYear }}
          </div>
          <div nz-col nzSpan="3">
            <button nz-button nzType="primary" (click)="onQueryMonthList()">
              确定
            </button>
          </div>
        </div>
        <div
          echarts
          [options]="monthOpt"
          [merge]="monthOptChange"
          style="height: 388px;"
        ></div>
      </ng-container>
      <ng-container *ngIf="idx == 3">
        <div class="title2" nz-row>
          <div nz-col nzSpan="16">
            <span>
              历史年：
            </span>
            <nz-year-picker
              [(ngModel)]="historyYear1"
              nzPlaceHolder=""
            ></nz-year-picker>
            <nz-year-picker
              [(ngModel)]="historyYear2"
              nzPlaceHolder=""
            ></nz-year-picker>
          </div>
          <div nz-col nzSpan="8">
            <span>类型：</span>
            <nz-select
              [(ngModel)]="hType"
              (ngModelChange)="changeHistoryChart()"
            >
              <nz-option
                *ngFor="let item of historyTypes; let idx = index"
                [nzValue]="idx"
                [nzLabel]="item"
              ></nz-option>
            </nz-select>
          </div>
        </div>
        <div class="title2" nz-row>
          <div nz-col nzSpan="20">
            <span>时间：</span>
            <nz-range-picker
              nzFormat="MM-dd"
              [nzPlaceHolder]="['开始时间', '结束时间']"
              ngModel
              (ngModelChange)="onChangeHistory($event)"
            ></nz-range-picker>
          </div>
          <div nz-col nzSpan="4">
            <button nz-button nzType="primary" (click)="onQueryHistory()">
              确定
            </button>
          </div>
        </div>
        <div
          echarts
          [options]="historyOpt"
          [merge]="historyOptChange"
          style="height: 388px;"
        ></div>
      </ng-container>
      <ng-container *ngIf="idx == 4">
        <!-- <ul class="dam-desc">
                    <li>
                        <span>测站名称</span>
                        <span></span>
                    </li>
                    <li>
                        <span>汛限水位</span>
                        <span></span>
                    </li>
                    <li>
                        <span>测站编号</span>
                        <span></span>
                    </li>
                    <li>
                        <span>历史最高水位</span>
                        <span></span>
                    </li>
                    <li>
                        <span>测站类型</span>
                        <span></span>
                    </li>
                    <li>
                        <span>历史最高水位出现时间</span>
                        <span></span>
                    </li>
                    <li>
                        <span>所属流域</span>
                        <span></span>
                    </li>
                    <li>
                        <span>历史最高流量</span>
                        <span></span>
                    </li>
                    <li>
                        <span>站址</span>
                        <span></span>
                    </li>
                    <li>
                        <span>历史最高流量出现时间</span>
                        <span></span>
                    </li>
                    <li>
                        <span>管理单位</span>
                        <span></span>
                    </li>
                    <li>
                        <span>经度</span>
                        <span></span>
                    </li>
                    <li>
                        <span>纬度</span>
                        <span></span>
                    </li>
                </ul> -->
      </ng-container>
    </nz-tab>
  </nz-tabset>
</div>
